<template>
	<view class="u-page fullpage" :style="skin">
		<view class="top-warp">
			<zx-nav title="我的订单"></zx-nav>
			<app-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></app-tabs>
		</view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :top="topH" @down="downCallback" @up="upCallback" :up="MesOption" :down="MesOption">
			<!-- 数据列表 -->
			<view class="list"><item v-for="(item, index) in orderlist" :key="index" :orderinfo="item" @upload="uploadlist"></item></view>
		</mescroll-body>
	</view>
</template>

<script>
import AppTabs from '@/components/app-tabs.vue';
import item from './components/item.vue';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState } from 'vuex';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			tabIndex: 0,
			tabs: ['全部', '待付款', '待发货', '待收货', '已完成'],
			orderlist: [],
			orderStatus: '',
			MesOption: {
				auto: false // 不自动加载
			},
			isInit: false,
			isLoad: false
		};
	},
	components: {
		AppTabs,
		item
	},
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(100) + uni.upx2px(20) + 'px';
		}
	},
	onLoad(options) {
		if (options.tabIndex) {
			this.tabIndex = parseInt(options.tabIndex);
			switch (this.tabIndex) {
				case 1:
					this.orderStatus = '1';
					break;
				case 2:
					this.orderStatus = '3,4';
					break;
				case 3:
					this.orderStatus = '5';
					break;
			}
		}
		console.log('options.tabindex', options.tabindex);
		this.isLoad = true;
		if (!this.isInit && this.mescroll) {
			this.isInit = true;
			this.mescroll.triggerUpScroll();
		}
	},
	methods: {
		tabChange() {
			var status = this.tabs[this.tabIndex];
			switch (status) {
				case '全部':
					this.orderStatus = '';
					break;
				case '待付款':
					this.orderStatus = '1';
					break;
				case '待发货':
					this.orderStatus = '3,4';
					break;
				case '待收货':
					this.orderStatus = 5;
					break;
				case '已完成':
					this.orderStatus = 10;
					break;
			}
			this.orderlist = [];
			this.mescroll.scrollTo(0, 0);
			this.mescroll.resetUpScroll();
		},
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序 (mescroll-mixins.js)
			// 自动加载当前tab的数据
			if (!this.isInit&&this.isLoad) {
				this.isInit = true;
				this.mescroll.triggerUpScroll();
			}
		},
		upCallback(mescroll) {
			this.getorderlist();
		},
		uploadlist() {
			this.mescroll && this.mescroll.resetUpScroll();
		},
		//获取售后订单列表
		getorderlist() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				status: this.orderStatus
			};
			this.$postAction(this.$api.getOrderlist, param).then(da => {
				if (da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.orderlist = []; //如果是第一页需手动制空列表
					this.orderlist = this.orderlist.concat(curPageData); //追加新数据
				} else {
					if (this.mescroll.num == 1) this.orderlist = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		}
	}
};
</script>

<style lang="scss">
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
}
</style>
